<template>
	<view class="root">
<<<<<<< HEAD
		<view class="head">
			<view class="flex align-center" style="width: 750rpx; font-weight: 800; height: 120rpx; padding-top: 60rpx; background-color: #f1f1f1;">
				<view @tap="change(0)" :class="current == 0 ? 'checked':'' " style="position: relative;" class="  choice flex1">
					<view>通知</view>
				</view>
				<view @tap="change(1)" :class="current == 1 ? 'checked':'' " style="position: relative;" class=" choice flex1">
					<view>公告</view>
				</view>
				<view @tap="change(2)" :class="current == 2 ? 'checked':'' " style="position: relative;" class=" choice flex1">
					<view>待办</view>
				</view>
			</view>
		</view>
		
		<view>
			<view style="width: 750rpx; height: auto;" v-if="1 == 1">
				<view style="display: flex; margin-top: 40rpx;">
					<view style="width: 110rpx; border-radius: 50%; height: 110rpx; text-align: center; line-height: 110rpx; background-color: #60CB64; margin-left: 60rpx;">
						<icon style="font-size: 80rpx; color: #FFFFFF;  " class="icon-jingqingqidai iconfont"></icon>
					</view>
					<view style=" margin: 0 40rpx; height: 110rpx; margin-top: 10rpx;">
						<view style="font-weight: 800; height: 55rpx;">新通知</view>
						<view style="color: #8c8c8c; height: 55rpx;">您有一条新通知</view>
					</view>
				</view>
				<view style="width: 750rpx; height: 1px; margin: 30rpx auto; background-color: #e2e2e2;"></view>
				
				<view style="display: flex; margin-top: 40rpx;">
					<view style="width: 110rpx; border-radius: 50%; height: 110rpx; text-align: center; line-height: 110rpx; background-color: #60CB64; margin-left: 60rpx;">
						<icon style="font-size: 80rpx; color: #FFFFFF;  " class="icon-jingqingqidai iconfont"></icon>
					</view>
					<view style=" margin: 0 40rpx; height: 110rpx; margin-top: 10rpx;">
						<view style="font-weight: 800; height: 55rpx;">新通知</view>
						<view style="color: #8c8c8c; height: 55rpx;">您有一条新通知</view>
					</view>
				</view>
				<view style="width: 750rpx; height: 1px; margin: 30rpx auto; background-color: #e2e2e2;"></view>
				
				<view style="display: flex; margin-top: 40rpx;">
					<view style="width: 110rpx; border-radius: 50%; height: 110rpx; text-align: center; line-height: 110rpx; background-color: #60CB64; margin-left: 60rpx;">
						<icon style="font-size: 80rpx; color: #FFFFFF;  " class="icon-jingqingqidai iconfont"></icon>
					</view>
					<view style=" margin: 0 40rpx; height: 110rpx; margin-top: 10rpx;">
						<view style="font-weight: 800; height: 55rpx;">新通知</view>
						<view style="color: #8c8c8c; height: 55rpx;">您有一条新通知</view>
					</view>
				</view>
				<view style="width: 750rpx; height: 1px; margin: 30rpx auto; background-color: #e2e2e2;"></view>
				
				<view style="display: flex; margin-top: 40rpx;">
					<view style="width: 110rpx; border-radius: 50%; height: 110rpx; text-align: center; line-height: 110rpx; background-color: #60CB64; margin-left: 60rpx;">
						<icon style="font-size: 80rpx; color: #FFFFFF;  " class="icon-jingqingqidai iconfont"></icon>
					</view>
					<view style=" margin: 0 40rpx; height: 110rpx; margin-top: 10rpx;">
						<view style="font-weight: 800; height: 55rpx;">新通知</view>
						<view style="color: #8c8c8c; height: 55rpx;">您有一条新通知</view>
					</view>
				</view>
				<view style="width: 750rpx; height: 1px; margin: 30rpx auto; background-color: #e2e2e2;"></view>
				
				
				
			</view>
			<view  v-else>
				<image style=" transform: translate(-50%,-50%); width: 350rpx; height: 350rpx; position: fixed; top: 50%; left: 50%;"
				 src="../../static/icon/nonotice.png"></image>
			</view>
=======
		<tg-slide @changeChoice="change" :tipList="tipList" style="width: 600rpx; margin: 20rpx auto;"></tg-slide>
		<view v-if="current == 0 && AllNotice.length > 0">
			<notice v-for="(item,index) in AllNotice" :key="index" :item="item" style="width: 100%;"></notice>
		</view>
		<view v-else-if="current == 1 && AllAnnNoticeList.length > 0">
			<notice v-for="(item,index) in AllAnnNoticeList" :key="index" :item="item" style="width: 100%;"></notice>
		</view>
		<view v-else-if="current == 2 && AllNeedNoticeList.length > 0">
			<notice v-for="(item,index) in AllNeedNoticeList" :key="index" :item="item" style="width: 100%;"></notice>
		</view>
		<view class="text-center" style="width: 750rpx; height: 40vh;" v-else>
			<icon class="my-icon icon-load iconfont"></icon>
			<view style="margin-top: 38vh;" class="text-center blod">暂时没有消息哦！</view>
>>>>>>> parent of 9c00801 (2.0 老人，管理员，新的ui)
		</view>
	</view>
</template>

<script>
	import tgSlide from "../../components/ui/tg-slide.vue"
	import notice from "../../components/ui/page/notice-list-item.vue"
	export default {
		components: {
			tgSlide,
			notice
		},
		computed: {
			isNull: {
				get() {
					var res = this.noticeList.length > 0;
					console.log(this.noticeList, this.noticeList.length > 0)
					return res
				}
			}
		},
		data() {
			return {
				current:0,
				AllNotice: [],
				AllNoticePage:1,
				AllAnnNoticeList:[],
				AllAnnNoticePage:1,
				AllNeedNoticeList:[],
				AllNeedNoticePage:1,
				bgc: '#33B0FF',
				tipList: [{
						content: '通知',
						color: '#63C3FF',
					},
					{
						content: '公告',
						color: '#63C3FF'
					},
					{
						content: '待办',
						color: '#63C3FF'
					}, 
				]
			}
		},
		async onShow() {
<<<<<<< HEAD
			//修改未读消息数
			// await this.$store.dispatch('rushNoRead');
=======
			// var res = await this.reqNotice(10, 1);
			// console.log(res)
			// this.noticeList = res
			 
			//获取通知消息列表
			this.AllNotice = await this.getAllNotice()
			console.log(this.AllNotice)
			
			//获取公告消息列表
			this.AllAnnNoticeList = await this.getAllAnnNotice()
			
			this.AllNeedNoticeList = await this.getAllNeedNotice()
>>>>>>> parent of 9c00801 (2.0 老人，管理员，新的ui)
		},
		async onReachBottom() {
			switch(this.current){
				case 0:{
					//加载通知下一页数据
					this.AllNoticePage++;
					var res = await this.getAllNotice({page:this.AllNoticePage,size:10});
					res.forEach(e=>{
						this.AllNotice.push(e)
					})
					
					break;
				}
			
				case 1:{
					this.AllAnnNoticePage++;
					var res = await this.getAllAnnNotice({page:this.AllNoticePage,size:10});
					res.forEach(e=>{
						this.AllAnnNoticeList.push(e)
					})
				}
			
				case 2:{
					this.AllNeedNoticePage++;
					var res = await this.getAllNeedNotice({page:this.AllNoticePage,size:10});
					res.forEach(e=>{
						this.AllNeedNoticeList.push(e)
					})
				}
			
				default:{
					
				}
			}
		},
		methods: {
			//待办消息列表
			async getAllNeedNotice(pageInfo = {page:1,size:10}){
				return (await this.$api.queryAllNeedNotice(pageInfo,{})).data.result.elements
			},
			//公告消息列表
			async getAllAnnNotice(pageInfo = {page:1,size:10}){
				return (await this.$api.queryAllAnnNotice(pageInfo,{})).data.result.elements
			},
			
			//通知消息列表
			async getAllNotice(pageInfo = {page:1,size:10}){
				return (await this.$api.queryAllNotice(pageInfo,{})).data.result.elements
			},
			async change(e) {
<<<<<<< HEAD
				//console.log(this.AllNeedNoticeList)
				this.current = e
				// this.$store.dispatch('getNotice', {});
=======
				console.log(e)
				this.current = e.current
				console.log(this.AllNeedNoticeList)

			},
			/**
			 * @param {Object} size
			 * @param {Object} page
			 * 待办
			 */
			async reqAllNeedNotice(size, page) {
				return (await this.$api.queryAllNeedNotice({
					page: 1,
					size: 1
				})).data.result.notice;
			},
			/**
			 * @param {Object} size
			 * @param {Object} page
			 * 公告
			 */
			async reqAllAnnNotice(size, page) {
				return (await this.$api.queryAllAnnNotice({
					page: 1,
					size: 1
				})).data.result.notice;
>>>>>>> parent of 9c00801 (2.0 老人，管理员，新的ui)
			},
			async reqNotice(size, page) {
				return (await this.$api.queryNotice({
					page: 1,
					size: 1
				})).data.result.notice;
			}
		}
	}
</script>

<style scoped>
<<<<<<< HEAD


	.checked {
		color: #60CB64;
	}

	.choice {
		text-align: center;
		line-height: 75rpx;
	}

	.head {
		width: 750rpx;
		top: 0;
		height: 190rpx;
		background-color: #C8C7CC;
	}

=======
	.my-icon {
		color: #888888;
		font-size: 100rpx;
		text-align: center;
		width: 750rpx;
		position: absolute;
		top: 40%;
		left: 0;
		animation: loding 2s;
		animation-iteration-count: infinite;
	}

	@keyframes loding {
		from {
			transform:rotate(0deg);
		}

		to {
			transform:rotate(360deg);
		}
	}

	.root::before {
		content: "";
		width: 700rpx;
		height: 20rpx;
		display: block;
	}

	.root::after {
		content: "";
		width: 700rpx;
		height: 100rpx;
		display: block;
	}
>>>>>>> parent of 9c00801 (2.0 老人，管理员，新的ui)
</style>
